<template>
  <div name="show">
    <ul class="goodList">
        <li v-for="goods in list" :key="goods.goodName" >
            <img v-bind:src="goods.img" alt="">
            <p>{{goods.goodName}}</p>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
    name: "show",
    props: { 
      goodsId: Number
    },
    data() {
        var that = this;
        var url = "";
        if(that.goodsId ==1) {
          url = "json/bijiben.json"
        }
        else if(that.goodsId ==2) {
          url = "json/shouji.json"
        }
        else
        {
          url = "json/bijiben.json"
        }
        this.$http.get(url).then(function(res){
          that.list = res.data;
        })
        return {
            list: [] //表示为一个集合，列表格式
        }
    },
    watch: {
      goodsId() {
        var that = this;
        var url = "";
        if(that.goodsId ==1) {
          url = "json/bijiben.json"
        }
        else if(that.goodsId ==2) {
          url = "json/shouji.json"
        }
        else
        {
          url = "json/bijiben.json"
        }
        this.$http.get(url).then(function(res){
          that.list = res.data;
        })
        return {
            list: [] //表示为一个集合，列表格式
        }
      }
    }

}
</script>

<style>
.goodList li{
   height: 200px;
   widows: 200PX;
   list-style: none;
   float: left;
   font-size: 12px;
   color: red;
   margin-bottom: 30px;
}
.goodList img {
  width: 180px;
  height: 180px;
}

</style>